<template>
  <div class="main-layout">
    <!-- 主内容区 -->
    <div class="main-content">
     
      <div class="video-wrapper">
        <iframe
          class="video-frame"
          src="//player.bilibili.com/player.html?isOutside=true&aid=765670802&bvid=BV1Kr4y1i7ru&cid=1596823640&p=1"
          scrolling="no"
          frameborder="0"
          allowfullscreen
          allow="fullscreen"
        ></iframe>
      </div>
      <div class="video-actions">
        <button class="action-btn">
       <svg t="1748429914131" class="icon" viewBox="0 0 1024 1024" version="1.1" 
       xmlns="http://www.w3.org/2000/svg" p-id="1673" width="20" height="20">
       <path d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z" fill="#5D5D5D" p-id="1674">
       </path>
       <path d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
        fill="#5D5D5D" 
        p-id="1675">
       </path>
       <path d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z" 
       fill="#5D5D5D" p-id="1676">
       </path>
       </svg>



          <span class="like-text">点赞</span>
          <span class="count">123</span>
        </button>
        <button class="action-btn">
          <svg t="1748430493429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2664" width="20" height="20">
          <path d="M949.888 457.258667c26.069333-29.824 13.866667-67.52-24.789333-76.309334L681.728 325.546667l-127.786667-214.677334c-20.266667-34.069333-59.925333-34.090667-80.213333 0l-127.786667 214.677334-243.370666 55.381333c-38.442667 8.746667-50.858667 46.506667-24.789334 76.309333l164.394667 188.053334-22.613333 248.917333c-3.584 39.466667 28.458667 62.805333 64.896 47.146667l237.781333-102.037334a21.333333 21.333333 0 0 0-16.810667-39.210666L267.626667 902.186667c-6.698667 2.88-6.229333 3.221333-5.568-4.096l24.277333-267.093334-176.426667-201.813333c-4.757333-5.461333-4.906667-5.034667 2.133334-6.634667l261.205333-59.434666 137.152-230.4c3.733333-6.293333 3.136-6.293333 6.869333 0l137.173334 230.4 261.205333 59.434666c7.125333 1.621333 6.954667 1.088 2.133333 6.613334l-176.426666 201.813333 24.256 267.093333a21.333333 21.333333 0 1 0 42.496-3.84l-22.613334-248.917333 164.394667-188.053333z" fill="#3D3D3D" p-id="2665">
          </path>
          </svg>
          收藏 <span class="count">88</span>
        </button>
        <button class="action-btn">
          <svg t="1748430588370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3674" width="20" height="20">
          <path d="M710.558242 462.359416h173.918051c13.608949 0 24.64019 11.04352 24.64019 24.65554v397.445987c0 13.617136-11.226692 24.65554-24.64019 24.65554H139.523707c-13.608949 0-24.64019-11.04352-24.64019-24.65554V487.015979c0-13.617136 11.227716-24.65554 24.64019-24.655539h173.918051c13.707187 0 24.820292-11.112082 24.820292-24.820292 0-13.707187-11.113105-24.820292-24.820292-24.820292H114.875331c-27.545356 0-49.632397 22.125927-49.632398 49.420573v447.196065c0 27.338648 22.221094 49.420573 49.632398 49.420573h794.248315c27.545356 0 49.633421-22.125927 49.633421-49.420573V462.140429c0-27.338648-22.222117-49.420573-49.633421-49.420573H710.558242c-13.707187 0-24.820292 11.113105-24.820292 24.820292s11.113105 24.819269 24.820292 24.819268zM516.65502 65.678862a25.212218 25.212218 0 0 0-9.858532 0.103354c-7.902994-1.678222-16.420995 0.560772-22.534226 6.674003L306.080094 250.638387c-9.599635 9.599635-9.577123 25.293059 0.115633 34.984792 9.760295 9.761318 25.356504 9.744945 34.985816 0.115634l146.000212-146.000212V785.063119c0 13.670348 11.112082 24.774243 24.820292 24.774243 13.802354 0 24.820292-11.091616 24.820291-24.774243V140.986011l144.751779 144.752802c9.599635 9.599635 25.293059 9.578146 34.985815-0.115634 9.760295-9.760295 9.744945-25.356504 0.115634-34.984792L538.491351 72.456219c-5.910617-5.909593-14.129812-8.173147-21.836331-6.777357z" p-id="3675">
          </path></svg>
          分享
        </button>
      </div>
      <!-- <div class="info-card">
        <div class="avatar"></div>
        <div class="info-content">
          <div class="course-title">数据库入门</div>
          <div class="course-desc">本课程将带你从零基础入门数据库，掌握数据库实战技巧。</div>
          <div class="teacher"><span>梦阳老师</span></div>
        </div>
      </div> -->
      <div class="comment-section">
        <div class="comment-title">评论区</div>
        <div class="comment-input-row">
          <input class="comment-input" type="text" placeholder="说点什么吧..." v-model="newComment" @keyup.enter="addComment" />
          <button class="comment-submit" @click="addComment">发送</button>
        </div>
        <ul class="comment-list">
          <li v-for="(comment, idx) in comments" :key="idx" class="comment-item">
            <div class="comment-avatar">
              <img :src="comment.avatar" alt="用户头像" />
            </div>
            <div class="comment-content">
              <div class="comment-user">{{ comment.user }}</div>
              <div class="comment-text">{{ comment.text }}</div>
            </div>
          </li>
          <li v-if="comments.length === 0" class="comment-empty">快来抢沙发吧~</li>
        </ul>
      </div>
    </div>
    <!-- 右侧推荐课程 -->
    <aside class="side right-side">
      <div class="side-title">推荐课程</div>
      <ul class="recommend-list">
        <li v-for="item in recommendList" :key="item.id" class="recommend-item">
          <img :src="item.cover" class="cover" />
          <div class="info">
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
            <div class="meta">
              <span class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M2 12C2 7.03 7.03 2 12 2s10 5.03 10 10-5.03 10-10 10S2 16.97 2 12Z" stroke="#f59e42" stroke-width="2" fill="none"/>
                  <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" stroke="#f59e42" stroke-width="2" fill="none"/>
                </svg>
                {{ item.views || '0' }}
              </span>
              <span class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0 1 12 3a5.5 5.5 0 0 1 10 5.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35Z" stroke="#f43f5e" stroke-width="2" fill="none"/>
                </svg>
                {{ item.likes || '0' }}
              </span>
            </div>
          </div>
        </li>
      </ul>
    </aside>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const recommendList = [
  {
    id: 1,
    cover: '/course-3.png',
    title: 'SQL从快速入门到精通 ',
    author: '程序不打烊',
    views: '7453',
    likes: '1246'
  },
  {
    id: 2,
    cover: '/course-2.jpg',
    title: 'SQL进阶实战',
    author: '杨丽丽',
    views: '8726',
    likes: '66'
  },
  {
    id: 3,
    cover: '/course-4.png',
    title: '数据库系统概论',
    author: '韩珍辉',
    views: '982',
    likes: '42'
  },
  {
    id: 4,
    cover: '/course-5.png',
    title: '数据库多表查询',
    author: '小黑老师',
    views: '4834',
    likes: '563'
  },
  {
    id: 5,
    cover: '/course-6.png',
    title: '数据库入门到大牛',
    author: '宋老师',
    views: '6013',
    likes: '1562'
  },
  {
    id: 6,
    cover: '/course-7.png',
    title: 'MySQL从基础到进阶',
    author: '苑昊老师',
    views: '6596',
    likes: '94'
  },
  {
    id: 7,
    cover: '/course-8.png',
    title: 'Python数据库实战',
    author: 'POUR',
    views: '8725',
    likes: '713'
  },
  {
    id: 8,
    cover: '/course-9.png',
    title: 'MySQL夺命连环30问',
    author: '徐庶老师',
    views: '9758',
    likes: '135'
  }
]

const newComment = ref('')
const comments = ref([
  {
    user: 'aaa',
    avatar: '/user1.png',
    text: '老师讲得真棒！'
  },
  {
    user: 'pr',
    avatar: '/user2.png',
    text: '受益匪浅，感谢分享~'
  }
])

function addComment() {
  if (newComment.value.trim()) {
    comments.value.unshift({
      user: 'pr',
      avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=guest',
      text: newComment.value
    })
    newComment.value = ''
  }
}
</script>

<style lang="scss" scoped>
body {
  background: #ffffff;
  color: #333333;
  min-height: 100vh;
}

.main-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: #ffffff;
  min-height: 100vh;
  padding: 0 1vw;
  box-sizing: border-box;
}

.main-content {
  flex: 1 1 700px;
  max-width: 800px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 2rem 0 2rem 2vw;
}

.video-wrapper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-top: 2rem;
  transition: box-shadow 0.3s, transform 0.3s;
  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px) scale(1.01);
  }
}

.video-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
}

.video-actions {
  display: flex;
  gap: 1.2em;
  margin: 1.2rem 0 0.5rem 0;
  .action-btn {
    display: flex;
    align-items: center;
    gap: 0.35em;
    background: #f2f2f2;
    color:#6b7280;
    border: none;
    border-radius: 8px;
    padding: 0.5em 1.2em;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    svg {
      margin-right: 0.15em;
      vertical-align: middle;
      display: block;
      
    }
    .like-text {
      color: #6b7280;
      font-weight: 700;
      margin: 0 0.2em 0 0.1em;
      font-size: 1.05em;
      letter-spacing: 1px;
    }
    .count {
      font-size: 0.98em;
      color: #666666;
      margin-left: 0.3em;
      font-weight: 500;
    }
    &:hover {
      background: #e0f2fe;
      color: #374151;
      transform: translateY(-2px) scale(1.04);
      .like-text {
        color:  inherit;
      }
    }
  }
}

.info-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  max-width: 800px;
  width: 100%;
  gap: 1.5rem;
  animation: fadeInUp 0.7s;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #93c5fd; // 浅蓝色
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #bfdbfe; // 淡蓝色背景
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.info-content {
  flex: 1;
  .course-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111111;
    margin-bottom: 0.3rem;
  }
  .course-desc {
    color: #333333;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .teacher {
    color: #000000;
    font-size: 0.95rem;
    span {
      font-weight: 500;
    }
  }
}

.comment-section {
  width: 100%;
  max-width: 800px;
  margin: 2.5rem 0 0 0;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.5rem 1.2rem 1.2rem 1.2rem;
  .comment-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1rem;
  }
  .comment-input-row {
    display: flex;
    gap: 0.7em;
    margin-bottom: 1.2em;
    .comment-input {
      flex: 1;
      border: 1.5px solid #cccccc;
      border-radius: 8px;
      padding: 0.6em 1em;
      font-size: 1rem;
      color: #000000;
      background: #ffffff;
      &:focus {
        border-color: #111111;
      }
    }
    .comment-submit {
  background: #3b82f6; // 浅蓝色按钮
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 1.2em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  &:hover {
    background: #2563eb; // 更深一点的蓝色 hover 效果
    transform: translateY(-2px) scale(1.04);
  }
}

  }
  .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    .comment-item {
      display: flex;
      align-items: flex-start;
      gap: 0.8em;
      padding: 0.7em 0;
      border-bottom: 1px solid #f2f2f2;
      .comment-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        background: #eaeaea;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .comment-content {
        flex: 1;
        .comment-user {
          font-weight: 600;
          color: #000000;
        }
        .comment-text {
          color: #111111;
          font-size: 1rem;
          margin-top: 0.1em;
        }
      }
    }
    .comment-empty {
      color: #999999;
      text-align: center;
      padding: 1.5em 0;
      font-size: 1rem;
    }
  }
}

.side {
  width: 300px; // 原为260px，调大一些
  min-width: 220px; // 原为180px
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin: 2rem 0 2rem 3vw; // 原为2vw，右移
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; // 增大推荐项之间的间隔
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.right-side {
  margin-left: 1vw; // 可保留或删掉，移动主由 `.side` 控制
}

.recommend-list {
  .recommend-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background 0.2s, transform 0.2s;

  &:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
  }

  .cover {
    flex-shrink: 0;
    width: 120px;
    height: 67.5px; // 16:9 比例
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
  }

  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.3rem 0;
    flex: 1;

    .title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 0.3rem;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: 1.2em;
      margin-top: 0.2em;
      .meta-item {
        display: flex;
        align-items: center;
        font-size: 0.85rem;
        color: #6b7280;
        gap: 0.2em;
        svg {
          margin-right: 0.15em;
          vertical-align: middle;
          stroke: #6b7280;
        }
        &:last-child {
          color: #6b7280;
        }
      }
    }

  }
}

}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .main-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .main-content {
    margin: 1rem 0 0 0;
    max-width: 100vw;
    padding: 0 2vw;
  }
  .side {
    margin: 1.5rem auto 0 auto;
    position: static;
    width: 96vw;
    max-width: 400px;
  }
}

</style>
